<template>
    <div>
        <navigationBar :bgType="3" navigationTitle="我的" />
        <!-- <navigationBar :bgType="3" :backType="2" navigationTitle="我的" /> -->

        <view
            class="wrap paddingBottom"
            :style="{ '--navigation-height': navigationHeight + 'px' }"
            v-if="dataInfo"
        >
            <image
                class="wrap-bg"
                :src="getImageURL('navigationBar/top_bg.png')"
                mode="widthFix"
            />

            <view class="wrap-info flex align-center just-between">
                <image class="avatar" :src="dataInfo.avatar" />

                <view class="info">
                    <view class="nickname fb-32 limit-num-line">
                        {{ dataInfo.nickname }}
                    </view>

                    <view class="identity-bg">
                        <view class="flex align-center">
                            <image
                                class="identity-img"
                                :src="
                                    getImageURL(
                                        'technician/mine/mine_identity.png'
                                    )
                                "
                            />

                            <view class="identity-level f-24 limit-num-line">
                                {{
                                    dataInfo.is_technician == 1
                                        ? "技师"
                                        : "普通用户"
                                }}
                            </view>
                        </view>
                    </view>
                </view>

                <image
                    class="setting"
                    :src="getImageURL('technician/mine/setting.png')"
                    @click="onSetting"
                />
            </view>

            <view class="wrap-wallet-bg">
                <image
                    class="wallet-btm-img"
                    :src="getImageURL('technician/mine/mine_wallet_btm.png')"
                />

                <view class="wallet-title-bg flex align-center just-between">
                    <image
                        class="wallet-img"
                        :src="getImageURL('technician/mine/mine_wallet.png')"
                    />
                    <view class="wallet-title f-34"> 我的钱包 </view>
                    <view class="recharge-btn f-26" @click="onRecharge">
                        立即充值
                    </view>
                </view>

                <view class="balance-coupon-collect flex align-center">
                    <view class="item">
                        <view class="flex column align-center just-center">
                            <view class="num f-48">
                                {{ dataInfo.money || "0" }}
                            </view>

                            <view class="name f-24"> 我的余额 </view>
                        </view>
                    </view>

                    <view class="item">
                        <view class="flex column align-center just-center">
                            <view class="num f-48">
                                {{ dataInfo.coupon_num || "0" }}
                            </view>

                            <view class="name f-24"> 我的卡券 </view>
                        </view>
                    </view>

                    <view class="item">
                        <view class="flex column align-center just-center">
                            <view class="num f-48">
                                {{ dataInfo.like_num || "0" }}
                            </view>

                            <view class="name f-24"> 我的收藏 </view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="wrap-invite-apply flex align-center just-between">
                <view class="item flex align-center">
                    <image
                        class="img-invite"
                        :src="getImageURL('technician/mine/mine_invite.png')"
                    />

                    <view class="right">
                        <view class="title f-32"> 邀请有礼 </view>
                        <view class="num-bg f-24"> 邀请新人 获得福利 </view>
                    </view>
                </view>

                <view class="item flex align-center" @click="onApply">
                    <image
                        class="img-apply"
                        :src="getImageURL('technician/mine/mine_apply.png')"
                    />

                    <view class="right">
                        <view class="title f-32"> 技师招募 </view>
                        <view class="num-bg f-24"> 人才招募 福利多多 </view>
                    </view>
                </view>
            </view>

            <view class="wrap-tool">
                <view class="tool-title fb-32 flex align-center">
                    常用工具
                </view>
                <view class="tool-list flex">
                    <block v-for="(item, index) in toolList" :key="index">
                        <view
                            class="item flex column align-center"
                            @click="$handle(item)"
                        >
                            <image :src="getImageURL(item.file)" class="img" />

                            <view class="title limit-num-line f-22">
                                {{ item.title }}
                            </view>
                        </view>
                    </block>
                </view>
            </view>
        </view>
    </div>
</template>

<script>
import { getUserInfo } from "@/API/mine.js";
export default {
    props: {
        /**
         * 用户状态
         */
        userStatus: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            navigationHeight: this.$navigationHeight,

            dataInfo: null,
            toolList: [],
        };
    },
    mounted() {
        uni.$on("onUserShow", () => {
            this.getData();
        });
        this.getData();
    },
    methods: {
        /**
         * 设置
         */
        onSetting() {
            uni.navigateTo({
                url: "/subPages/technician/mine/setting",
            });
        },
        /**
         * 充值
         */
        onRecharge() {
            uni.navigateTo({
                url: "/subPages/technician/mine/recharge",
            });
        },
        /**
         * 申请技师
         */
        onApply() {
            if (this.dataInfo.is_technician == 1) {
                uni.showToast({
                    icon: "none",
                    title: "您已经是技师了",
                });
                return;
            } else if (this.dataInfo.is_technician == 2) {
                uni.navigateTo({
                    url: `/subPages/technician/recruit/ToBeReviewed`,
                });
                return;
            } else if (this.dataInfo.is_technician == 3) {
                uni.navigateTo({
                    url: `/subPages/technician/recruit/errReviewed?why=${this.dataInfo.why}`,
                });
            } else {
                uni.navigateTo({
                    url: `/subPages/technician/recruit/JoinUs`,
                });
            }
        },

        /**
         * 获取网络请求
         */
        getData() {
            getUserInfo().then((res) => {
                this.dataInfo = res.data;

                this.toolList = [
                    {
                        title: "申请分销商",
                        file: "technician/mine/mine_sqfxs.png",
                        handle: () => {},
                    },
                    {
                        title: "招商加盟",
                        file: "technician/mine/mine_zsjm.png",
                        handle: () => {},
                    },
                    {
                        title: "申请渠道商",
                        file: "technician/mine/mine_sqqds.png",
                        handle: () => {},
                    },
                    {
                        title: "地址管理",
                        file: "technician/mine/mine_address.png",
                        handle: () => {
                            uni.navigateTo({
                                url: `/subPages/technician/mine/addressList`,
                            });
                        },
                    },
                    {
                        title: "问题反馈",
                        file: "technician/mine/mine_wtfk.png",
                        handle: () => {},
                    },
                    {
                        title: "我的评价",
                        file: "technician/mine/mine_wdpj.png",
                        handle: () => {},
                    },
                    {
                        title: "退款售后",
                        file: "technician/mine/mine_tksh.png",
                        handle: () => {
                            uni.navigateTo({
                                url: `/subPages/technician/refundAfterSales/list`,
                            });
                        },
                    },
                    {
                        title: "联系客服",
                        file: "technician/mine/mine_lxkf.png",
                        handle: () => {
                            uni.makePhoneCall({
                                phoneNumber: this.dataInfo.ServiceMobile,
                            });
                        },
                    },
                    {
                        title: "切服务端",
                        file: "technician/mine/mine_qhfw.png",
                        handle: () => {
                            uni.$off("onUserShow");
                            this.$stoarge.setUserStatus(2);
                            this.$emit("update:userStatus", 2);
                        },
                    },
                ];
                if (this.dataInfo.is_technician != 1) {
                    this.toolList.pop();
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.wrap {
    --bottom-height: 120rpx;
    position: relative;
    z-index: 1;
    padding-left: 30rpx;
    padding-right: 30rpx;
    box-sizing: border-box;

    .wrap-info {
        margin-top: 40rpx;
        width: 100%;
        padding: 0 10rpx;
        box-sizing: border-box;
        overflow: hidden;

        .avatar {
            width: 126rpx;
            height: 126rpx;
            border-radius: 50%;
            overflow: hidden;
        }

        .info {
            --limit-num: 1;
            margin-left: 26rpx;
            margin-right: 20rpx;
            flex: 1;
            overflow: hidden;

            .nickname {
                color: $bg-text-color;
            }

            .identity-bg {
                display: inline-block;
                margin-top: 14rpx;
                background-color: rgba(255, 255, 255, 0.5);
                border-radius: 40rpx;
                overflow: hidden;
                padding: 0 15rpx;
                text-align: center;

                > view {
                    width: 100%;
                    height: 40rpx;
                }

                .identity-img {
                    width: 24rpx;
                    height: 22rpx;
                }

                .identity-level {
                    margin-left: 10rpx;
                    color: white;
                }
            }
        }

        .setting {
            width: 36rpx;
            height: 32rpx;
        }
    }

    .wrap-wallet-bg {
        margin-top: 48rpx;
        width: 100%;
        position: relative;
        z-index: 2;

        .wallet-btm-img {
            position: absolute;
            left: -10rpx;
            bottom: 0rpx;
            width: 710rpx;
            height: 24rpx;
            z-index: 1;
        }

        .wallet-title-bg {
            width: 100%;
            height: 82rpx;
            overflow: hidden;
            border-top-left-radius: 44rpx;
            border-top-right-radius: 44rpx;
            background: #e1ebff;
            padding: 0 32rpx;
            box-sizing: border-box;

            .wallet-img {
                width: 32rpx;
                height: 32rpx;
            }
            .wallet-title {
                margin-left: 18rpx;
                flex: 1;
                color: $theme-color;
            }

            .recharge-btn {
                width: 146rpx;
                height: 52rpx;
                line-height: 52rpx;
                text-align: center;
                background-color: $theme-color;
                color: $bg-text-color;
                border-radius: 26rpx;
                overflow: hidden;
            }
        }

        .balance-coupon-collect {
            background: $grad-theme-color;
            padding-top: 15rpx;
            width: 100%;
            height: 155rpx;
            overflow: hidden;
            white-space: nowrap;
            position: relative;
            z-index: 3;

            .item {
                display: inline-block;
                flex: 1;
                height: 155rpx;
                position: relative;
                z-index: 3;

                > view {
                    width: 100%;
                    height: 100%;

                    .num {
                        color: $bg-text-color;
                    }

                    .name {
                        margin-top: 20rpx;
                        color: $bg-text-color;
                    }
                }
            }
        }
    }

    .wrap-invite-apply {
        margin-top: 30rpx;
        width: 100%;

        .item {
            width: 336rpx;
            height: 142rpx;
            background-color: white;
            border-radius: 20rpx;
            overflow: hidden;
            box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
            box-sizing: border-box;
            padding: 0 30rpx;
            position: relative;

            > image {
                position: absolute;
                right: 0;
            }

            .img-invite {
                top: 18rpx;
                width: 116rpx;
                height: 116rpx;
            }

            .img-apply {
                top: 20rpx;
                width: 102rpx;
                height: 104rpx;
            }

            .right {
                flex: 1;
                overflow: hidden;

                .title {
                    color: $title-color;
                }

                .num-bg {
                    margin-top: 24rpx;
                    color: #666666;
                }
            }
        }
    }

    .wrap-tool {
        margin-top: 30rpx;
        width: 100%;
        box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
        border-radius: 20rpx;
        background-color: white;
        padding: 0 30rpx;
        box-sizing: border-box;

        .tool-title {
            width: 100%;
            overflow: hidden;
            height: 80rpx;
            border-bottom: 2rpx solid $separa-color;
            color: $title-color;
        }

        .tool-list {
            padding: 20rpx 0rpx;
            margin-left: -10rpx;
            width: calc(100% + 10rpx);
            overflow: hidden;
            flex-wrap: wrap;

            .item {
                margin-left: 10rpx;
                margin-bottom: 30rpx;
                width: 150rpx;
                overflow: hidden;

                .img {
                    width: 72rpx;
                    height: 72rpx;
                }

                .title {
                    --limit-num: 1;
                    margin-top: 14rpx;
                    color: $title-color;
                }
            }
        }
    }
}
</style>
